<template>
  <a-col :span="labelSpan">
    <a-form-model-item
      class="check-bg"
      :label="attrObj.formLabel"
      :prop="attrObj.formProps"
      :wrapper-col="itemSpan"
    >
      <a-checkbox-group v-model.trim="formModel[attrObj.formProps]" :disabled="attrObj.isDisabled" @change="onChange">
        <a-checkbox :value="item.key" v-for="item in attrObj.options" :key="item.key">
          {{ item.title }}
        </a-checkbox>
      </a-checkbox-group>
    </a-form-model-item>
  </a-col>
</template>

<script>
export default {
  name: "FormCheckbox",
  data() {
    return {
    };
  },
  props: {
    labelSpan: {
      type: Number,
      default: 6
    },
    attrObj: {
      type: Object,
      default() {
        return {
          formLabel: "",
          formProps: "",
          itemSpan: 6,
          isDisabled: false,
          type: "",
          fixedDisabled: false,
          options: []
        };
      }
    },
    formModel: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    itemSpan() {
      return this.attrObj.itemSpan ? { span: this.attrObj.itemSpan } : null;
    }
  },
  methods: {
    onChange() {
    }
  }
};
</script>

<style lang="less" scoped>
.check-bg {
  ::v-deep .ant-form-item-control-wrapper {
    background: #FAFAFA;
    padding: 10px;
  }
}
</style>
